<template>
  <div class="table-body">
    <el-table :data="tableData" :row-key="rowKey" stripe style="width: 100%; height: 100%"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" reserve-selection v-if="showSelection"/>
        <!-- 序号 -->
        <el-table-column
          label="编号"
          type="index"
          width="60"
          v-if="showIndex"
        ></el-table-column>
        <el-table-column v-for="(item, index) in tableCfg" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
          <template #default="scope">
             <!-- 插槽 -->
             <slot v-if="item.type == 'slot'" :name="item.prop" :row="scope.row"></slot>
             
             <span v-else-if="item.type == 'dict'">
                <el-tag type="primary" v-if="item.tag">{{ dicts[item.dictName].find((dict) => dict.value == scope.row[item.prop])?.label }}</el-tag>
                <span v-else>{{ dicts[item.dictName]?.find((dict) => dict.value == scope.row[item.prop])?.label }}</span>
              </span>
               <!-- img 图片 -->
              <img v-else-if="item.type === 'img'" style="width: 100%;"
                  :src="scope.row[item.prop]" class="nar-img" @click="sa.showImage(scope.row[item.prop], '400px', '400px')" alt="img" />
              <span v-else>
                {{ item.formatter ? item.formatter(scope.row[item.prop]) : scope.row[item.prop] }}
              </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :width="operationWidth" align="center" v-if="showOperation">
          <template #default="scope">
              <slot name="operation" :row="scope.row" ></slot>
          </template>
        </el-table-column>
    </el-table>
  </div>
  <table-pagin v-if="showPagin" :page-no="pagin.pageindex + 1" :page-size="pagin.pagesize" :total="pagin.total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
</template>
<script setup>
import tablePagin from '../pagin/table-pagin.vue'
import dicts from '@/utils/dict'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  tableCfg: {
    type: Array,
    default: () => []
  },
  // 是否有分页
  showPagin: {
    type: Boolean,
    default: true
  },
  // 分页信息
  pagin: {
    type: Object,
    default: () => {
      return {
        pageindex: 0,
        pagesize: 10,
        total: 0
      }
    }
  },
  // 是否显示多选框
  showSelection: {
    type: Boolean,
    default: false
  },
  // 是否显示序号
  showIndex: {
    type: Boolean,
    default: false
  },
  // 是否显示操作列
  showOperation: {
    type: Boolean,
    default: true
  },
  // 操作列宽度
  operationWidth: {
    type: Number
  },
  // 表格列配置
  rowKey: {
    type: String
  }
})

function handleCurrentChange(val) {
  emit('handleCurrentChange', val - 1)
}
function handleSizeChange(val) {
  emit('handleSizeChange', val)
}

function handleSelectionChange(val) {
  emit('handleSelectionChange', val)
}

const emit = defineEmits(['handleCurrentChange', 'handleSizeChange', 'handleSelectionChange'])
</script>